<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin:0; padding:0; list-style:none;}
        
        #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
        #div1 ul {position:absolute;left: 0;top: 0;}
        #div1 ul li{height:500px;float: left;}
        #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
        #div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
        #div1 ol li.ac{background: red;color: #fff;}
        #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
        #goPrev{left: 0;}
        #goNext{right: 0;}
        img{width:850px; height:500px;}
    </style>
    <script src="../util.js"></script>
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
        </ul>
        <ol>
    
        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>
    <script>
        window.onload = function () {
            var box = document.querySelector('#div1')
            var goPrev = document.querySelector('#goPrev')
            var goNext = document.querySelector('#goNext')
            var imgs = document.querySelectorAll('#div1 ul li')
            var ol = document.querySelector('#div1 ol')
            var ul = document.querySelector('#div1 ul')
            var len = imgs.length

            var width = imgs[0].offsetWidth
            ul.style.width = (len+1) * width + 'px'
            
            var lastIndex = 0
            var index = 0
            var arr = []
            for(var i=0;i<len;i++){
                var li = document.createElement('li')
                li.innerHTML = i+1
                ol.appendChild(li)
                arr.push(li)
            }
            arr[0].className = 'ac'
            ul.appendChild(imgs[0].cloneNode(true))

            var ismove = false    //是否是静止状态  //默认静止
            
            arr.forEach( (li,i) =>{
                li.onclick = () =>{
                    if(!ismove){
                        ismove = true
                        lastIndex = index
                        index = i
                        utils.bfmove(ul,'left',-index*width,() =>{
                            ismove = false
                        })
                        arr[lastIndex].classList.remove('ac')
                        arr[index].classList.add('ac')
                    }
                }
            })

            
            goNext.onclick = function () {
                if(!ismove){
                    ismove = true
                    lastIndex = index
                    index++
                    if(index == len){
                        index = 0
                        utils.bfmove(ul,'left',-len*width,() =>{
                            ul.style.left = -index * width + 'px'
                            ismove = false
                        })
                    }else{
                        utils.bfmove(ul,'left',-index*width,() =>{
                            ismove = false
                        })
                    }
                    addclass()
                }
            }
            
            goPrev.onclick = function () {
                if(!ismove){
                    ismove = true
                    lastIndex = index
                    index--
                    if(index < 0){
                        index = len-1
                        ul.style.left = -len * width + 'px'
                    }
                    utils.bfmove(ul,'left',-index*width,() =>{
                        ismove = false
                    })
                    addclass()
                }
            }

            auto()
            function auto(){
                box.timer = setInterval(() =>{
                    goNext.onclick()
                },1500)
            }

            box.onmouseenter = () =>{
                clearInterval(box.timer)
            }

            box.onmouseleave = () =>{
                auto()
            }

            // box.onmouseleave = (function auto (){
            //     box.timer = setInterval(() =>{
            //         goNext.onclick
            //     },1500)
            //     return auto
            // })()

            function addclass () {
                arr[lastIndex].classList.remove('ac')
                arr[index].classList.add('ac')
            }
        }      
    </script>
</body>
</html>